<template>
    <div class="Community">
        <Header></Header>
        <div id="Community-pc">               
            <div class="navigation-bar">
                <div class="center-position">
                    <div class="left-part">
                        <div class="title">奇点社区</div>
                        <div class="choice">
                            <div
                            :class="[index+1 == activeItem1 ? 'black' : '', 'name']" 
                            v-for="(item,index) in category" 
                            :key="item"
                            @click="handleClick(index)"
                            >
                            {{item}}
                            </div> 
                        </div>
                    </div>
                    <div class="middle-part">
                        <input type="text" placeholder="找文章/找策略/找作者" 
                        v-model="search"
                        @keyup.enter="handleSearch">
                        <i class="el-icon-search input-button" @click="handleSearch"></i>
                    </div>
                    <div class="right-part">
                         <el-button type="primary" icon="el-icon-edit" plain @click="$router.push({path:'#',query:{action:'write'}})">写文章</el-button>
                        <el-button type="primary" icon="el-icon-search"  @click="$router.push({path:'#',query:{action:'ask'}})">提问题</el-button>
                    </div>
                </div>
                
            </div>
            <div class="left">
                <div class="small-title">
                    <span 
                    :class="[activeItem2 == 1 ? 'black':'','classify']" 
                    @click="deal('id',1)"
                    >推荐</span>
                    <span class="classify">|</span>
                    <span
                    :class="[activeItem2 == 2 ? 'black':'','classify']"
                    @click="deal('time',2)"
                    >最新</span>
                </div>
                <div class="post">
                    <Community_Card
                    v-for="item in filter(message,$route.query.pilot) "
                    :key="item.id"
                    :message="item"
                    v-show="item.category == activeItem1">
                    </Community_Card>
                </div>
            </div>
            <div class="right">
                <div class="small-title">
                    <span class="label">
                        热门标签
                    </span>
                    <el-popover
                        placement="bottom"
                        title="热门标签"
                        width="400"
                        trigger="click"
                    >
                        <Tag2 
                        v-for="(item,index) in tags1" 
                        :key="index"
                        :content="item">
                        </Tag2>
                        <a class="cursor" slot="reference">
                            查看更多
                        </a>
                    </el-popover>
                   
                </div>
                <div class="many-label">
                    <Tag2 class="Tag2" 
                    v-for="(item,index) in tags2" 
                    :key="index"
                    :content="item"></Tag2>
                    
                </div>
                <div class="small-title">
                    <span class="label">
                        推荐关注
                    </span>
                    <a class="cursor" @click.prevent="handleTopAuthor">
                        换一批
                    </a>
                </div>
                <div class="attention">
                    <div class="one-attention" v-for="item in tempTopAuthor" :key="item.id">
                        <router-link
                        :to="{path:'/Attention',query:{idcard: item.id}}"
                        tag="div"
                        class="head">
                        <img src="@/assets/Community_head_photo.jpg">
                        </router-link>
                        <div class="text-name">
                            <router-link
                            :to="{path:'/Attention',query:{idcard: item.id}}"
                            tag="p"
                            class="name">
                                {{item.name}}
                            </router-link>
                            <p clas="fans">
                                {{item.articleNum}} 篇文章 | {{item.attentionNum}} 人关注
                            </p>
                        </div>
                        <div class="test-btn">
                            <button class="btn-fans">+关注</button>
                        </div>
                    </div>
                </div>
                
                <div class="small-title">
                    <span class="label">
                        贡献榜
                    </span>
                    <span class="rank">
                        全部
                    </span>
                    <span class="rank">
                        月榜
                    </span>
                </div>
                <div class="attention">
                     <div class="one-attention" v-for="item in contributions" :key="item.id">
                        <router-link 
                        :to="{path:'/Attention',query:{idcard:item.id}}"
                        tag="div"
                        class="head cursor">
                        <!-- <img :src="item.imgSrc"> -->
                        <img src="@/assets/Community_head_photo.jpg">
                        </router-link>
                        <div class="text-name">
                            <router-link 
                            :to="{path:'/Attention',query:{idcard:item.id}}"
                            tag="p"
                            class="name1 cursor">
                            {{item.name}}
                            </router-link>
                        </div>
                        <div class="test">
                            +{{item.num}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="Community-mobile">
            <div class="mobile-top1">
                <div class="top1-title">
                    奇点社区
                </div>
                <div class="top1-btn">
                    <router-link 
                    :to="{path:'/Write_An_Article',query:{action:'write'}}"
                    tag="button"
                    class="btn1">
                    发起主题
                    </router-link>
                </div>
            </div>
            <div class="mobile-top2">
                <!-- <i class="el-icon-search input-button" @click="handleSearch"></i> -->
                <input type="text" 
                class="top2-input" 
                placeholder="找策略/找文章/找作者"
                v-model="search">
                <el-button type="primary" icon="el-icon-edit" plain @click="handleSearch"></el-button>
            </div>
            <div class="mobile-top3">
                <span 
                :class="[index+1 == activeItem1 ? 'black' : '', 'top3-word']"
                v-for="(item,index) in category"
                :key="item"
                @click="handleClick(index)">
                {{item}}
                </span>
            </div>
            <div class="mobile-top4">
            </div>
            <div class="mobile-top5">
                <Post 
                v-for="item in filter(message,$route.query.pilot)"
                :key="item.id"
                :message="item"
                v-show="item.category == activeItem1">
                </Post>
            </div>
        </div>
    </div>
</template>
<script>
// 目前实现文章分类，排序方面首先根据置顶值进行一轮排序，再根据热度值（推荐）或时间（最新）进行二轮排序
// 通过搜索关键字进行搜索功能，但是搜索命中后不会根据目标项所属类别如文章跳转具体版块
// 无法通过标签进行索引
import Header from '@/components/Header.vue'
import Tag2 from '@/components/tags/Tag2.vue'
import Community_Card from '@/components/cards/Community_Card.vue'
import { constants } from 'crypto';
export default {
    name: 'Community',
    data(){
        return {
            // 1： 文章；2： 问答；3：公告；4：精华
            activeItem1: 1,
            activeItem2: 1,
            category: ["文章","问答","公告","精华"],
            tags1: ['研报分享','期权','多因子','事件推动','函数','选股','基金','因子','打板','抄底','交叉选股'],
            tags2: [],
            search: '',
            message: [
                {
                    id: 1,
                    title : 'Xgboost 50ETF 2.0 分钟级回测',
                    content: 'Xgboost预测50ETF第二日涨跌幅 样本外回测情况，无样本内数据。 特征工程方法衍生变量。 较1.0版有显著提升。',
                    author: ' ☺奇点小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,4),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 0,
                    elite: true,
                    category: 1, // 1： 文章；2： 问答；3：公告；4：精华
                    tags: ['研报复现','机器学习']
                },
                {
                    id: 2,
                    title : '请问这个金融终端的升级提示是什么意思？',
                    content: '升级提示：!!! 您好，十分抱歉的通知您，金融终端的相关服务将于 2019-12-31 起暂停维护',
                    author: ' ☺小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,5),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 1,
                    elite: true,
                    category: 2,
                    tags: ['研报复现','机器学习']
                },
                {
                    id: 3,
                    title : '【重磅更新】原油期货数据及tick级数据回测和模拟交易上线！',
                    content: '原油期货在上海期货交易所子公司——上海国际能源交易中心正式挂牌交易。首个交易日成交规模超过元人民币。从发布会规模和出席等级可以看出这是今年的重大金融事件之一，作为中国商品期货第一个全球上市的品种，是我国商品期货市场走向国际化的第一步，',
                    author: ' ☺小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,6),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 19,
                    elite: true,
                    category: 3,
                    tags: ['研报复现','机器学习']
                },
                {
                    id: 4,
                    title : 'Barra模型初探，A股市场风格解析',
                    content: '对Barra模型的基本原理进行介绍，对模型的细节部分进行说明，试图构建多因子收益归因模型',
                    author: ' ☺小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,1),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 4,
                    elite: true,
                    category: 4,
                    tags: ['研报复现','机器学习']
                },
                {
                    id: 5,
                    title : '系统更新日志',
                    content: '如果链接没有在API文档中直接跳转到该函数，请使用ctrl f进行搜索。',
                    author: ' ☺小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,3),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 0,
                    elite: true,
                    category: 3,
                    tags: ['研报复现','机器学习']
                },
                {
                    id: 6,
                    title : '让量化助力实盘 – 中泰极速量化交易系统上线',
                    content: '每月调整一次仓位，股票7成仓位，等市值卖出300etf 如果实盘中是IF的话，股指限制前10%左右的保证金，30%仓位足够覆盖期货头寸的保证金了，其实只用7%左右资金',
                    author: '☺小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,0),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 2,
                    elite: true,
                    category: 1,
                    tags: ['研报复现','机器学习','专家成果']
                },
                {
                    id: 7,
                    title : '【API解析】避免未来数据',
                    content: '未来函数，未来数据 回测中能够引入未来数据的函数，即可以返回未来数据的函数；通过未来函数获取到的数据为未来数据；例如开盘使用get_price获取当天的收盘价，则get_price为未来函数，当天的收盘价为未来数据。更多的数据可以参考数据更新频率',
                    author: ' ☺小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,2),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 0,
                    elite: true,
                    category: 1,
                    tags: ['研报复现','机器学习','专家成果']
                },
                {
                    id: 8,
                    title : '简单阿尔法策略： 量化选股 + 做空300etf（代替IF）',
                    content: '每月调整一次仓位，股票7成仓位，等市值卖出300etf 如果实盘中是IF的话，股指限制前10%左右的保证金，30%仓位足够覆盖期货头寸的保证金了，其实只用7%左右资金',
                    author: ' ☺小秘书',
                    authorId: 1,
                    fuzzyTime: '1个月前',
                    time: new Date(2008,1,0),
                    view: '56',
                    review: '56',
                    like: '56',
                    top: 0,
                    elite: true,
                    category: 1,
                    tags: ['研报复现','机器学习','专家成果']
                },
            ],
            topAuthorFlag:0,
            topAuthor:[
                {
                    id: 1,
                    imgSrc: '',
                    name : '拉姆达投资',
                    articleNum : 20,
                    attentionNum: 40
                },
                {
                    id: 2,
                    imgSrc: '',
                    name: '颖硕',
                    articleNum : 24,
                    attentionNum: 46
                },
                {
                    id: 3,
                    imgSrc: '',
                    name : '小兵哥',
                    articleNum : 20,
                    attentionNum: 40
                },
                {
                    id: 4,
                    imgSrc: '',
                    name: '陈小米。',
                    articleNum : 24,
                    attentionNum: 46
                },
                {
                    id: 5,
                    imgSrc: '',
                    name : 'K线放荡不羁',
                    articleNum : 20,
                    attentionNum: 40
                },
                {
                    id: 6,
                    imgSrc: '',
                    name: 'LS',
                    articleNum : 24,
                    attentionNum: 46
                },
                {
                    id: 7,
                    imgSrc: '',
                    name : 'WMY',
                    articleNum : 20,
                    attentionNum: 40
                },
                {
                    id: 8,
                    imgSrc: '',
                    name: '小兔子',
                    articleNum : 24,
                    attentionNum: 46
                },{
                    id: 9,
                    imgSrc: '',
                    name: '森林之王',
                    articleNum : 24,
                    attentionNum: 46
                }
            ],
            tempTopAuthor:[],
            contributions:[
                {
                    id: 1,
                    imgSrc: '',
                    name: '总书记',
                    num: 6666
                }
            ]
        }
    },
    created(){
        this.sort('id')
        this.handleTopAuthor()
        this.handleTags()
    },
    methods:{
      // attr为Num属性值
      // 默认降序排列
      deal(attr , num){
          this.sort(attr)
          this.activeItem2 = num
      },
      handleTags(){
          for(var i=0;i<8;i++){
              this.tags2[i] = this.tags1[i]
          }
      },
      filter(arr,pilot){
          return arr.filter(item => {
              return item.title.search(pilot) != -1
          })
      },
      handleTopAuthor(){
        this.tempTopAuthor = []
        var i = 0
        while(i!=4){
           this.tempTopAuthor[i++] = this.topAuthor[this.topAuthorFlag++]
           if(this.topAuthorFlag>=this.topAuthor.length) this.topAuthorFlag = 0 
        }
      },
      handleClick(index){
          this.activeItem1 = index+1
          this.$router.push({path:'/Community',query:{pilot:''}})
      },
      handleSearch(){
          this.$router.push({path:'/Community',query:{pilot:this.search}})
      },
      sort(attr){
          this.message.sort((a,b) => {
            if(a.top!=b.top)
                return b.top - a.top
            else
                return a[attr] > b[attr] ? -1 : 1
          })
      }
    },
    components: {
    Header,
    Community_Card,
    Tag2,
  }
}
</script>
<style scoped>
.cursor{
    cursor: pointer;
}
.black{
    color: #242424 !important;
    font-weight: bold !important;
}
@media screen and (min-width:981px){
    #Community-mobile{
        display: none;
    }
    #Community-pc{
        display: block;
        width: 80%;
        height: auto;
        margin: 0px auto;
        padding-top:57px;
        overflow: hidden;
    }
    .navigation-bar{
        position: fixed;
        z-index: 10;
        width: 80%;
        height:57px;
        background-color: #fff;
        border-bottom: 1px solid #e6e6e6;
    }
    .navigation-bar .center-position{
        width: 100%;
        height: 57px;
        margin: 0px auto;
    }
    .navigation-bar .left-part{
        float: left;
        width: 30%;
        height:57px;
    }
    .navigation-bar .left-part .title{
        float: left;
        line-height: 57px;
        width: 45%;
        font-size: 28px;
        font-weight: normal;
    }
    .navigation-bar .left-part .choice{
        float: left;
        width: 55%;
        height: 57px;
    }
    .navigation-bar .left-part .choice .name{
        float: left;
        width: 25%;
        height: 57px;
        line-height: 57px;
        text-align: center;
        color: #9a9a9a;
        cursor: pointer;
        font-weight: normal;
        transition: all 0.2s ease 0s;
    }
    .navigation-bar .left-part .choice .name:hover{
        color: #202020;
        font-weight: bold;
    }
    .navigation-bar .middle-part{
        position: relative;
        float: left;
        width: 45%;
        height: 57px;
    }
    .navigation-bar .middle-part input{
        float: right;
        width: 45%;
        margin-top: 7px;
        margin-right: 5%;
        border-radius: 100px;
        font-size: 14px;
    }
    .navigation-bar .middle-part input:active{
        border: 2px solid rgb(55, 95, 226);
    }
    .navigation-bar .middle-part input:focus{
        border: 1px solid rgb(111, 137, 223);
    }
    .navigation-bar .middle-part .input-button{
        position: absolute;
        top: 19px;
        right: 44px;
        color: #9a9a9a;
        cursor: pointer;
        font-weight: normal;
        transition: all 0.2s ease 0s;
    }
    .navigation-bar .middle-part .input-button:hover{
        color: #202020;
        font-weight: bold;
    }
    .navigation-bar .right-part{
        float: right;
        width: 25%;
        box-sizing: border-box;
        height: 57px;
    }
    .navigation-bar .right-part .el-button{
        width: 47%;
        margin-top: 7px; 
    }
    .left{
        float: left;
        padding-top:57px;
        width:70%;
        height:auto;
    }
    .left .small-title{
        width:100%;
        height:40px;
        box-sizing: border-box;
        padding-left: 2%;
        border-bottom: 1px solid #e6e6e6;
    }
    .left .small-title .classify{
        display: inline-block;
        width: 34px;
        font-size:15px;
        font-weight: bold;
        line-height: 40px;
        text-align: center;
        color:#9a9a9a;
        cursor: pointer;
    }
    .left .small-title .classify:hover{
        color:black;
    }
    .left .post{
        width:100%;
        height:auto;
        float:left;
    }
    .right{
        float: left;
        padding-left: 3%;
        padding-right: 3%;
        padding-top:57px;
        width:30%;
    }
    .right .small-title{
        width:100%;
        height:auto;
        height:40px;
        border-bottom: 1px solid #e6e6e6;
    }
    .right .small-title .label{
        float:left;
        font-size:18px;
        line-height: 40px;
        color: #696969;
    }
    .right .small-title .rank{
        float:right;
        font-size:15px;
        font-weight: bold;
        line-height: 40px;
        margin-left:15px; 
        color: #696969;
    }
    .right .small-title a{
        float:right;
        font-size:16px;
        line-height: 40px;
        color:#696969;
    }
    .many-label{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
        padding-top: 20px;
        min-height:100px; 
        margin-bottom:20px;
    }
    .many-label .Tag2{
        margin: 4px;
    }
    .attention{
        width:100%;
        height: auto;
        padding-bottom: 30px;
    }
    .attention .one-attention{
        width:100%;
        height: 75px;
        padding-top:28px;
    }
    .attention .one-attention .head{
        float: left;
        width:20%;
        height: 45px;
        margin-right:3%; 
        cursor: pointer;
    }
    .attention .one-attention .text-name{
        float: left;
        width:55%;
        height: 45px;
        margin-right:7%; 
    }
    .attention .one-attention .text-name .name{
        font-size: 18px;
        margin-bottom:10px; 
        color: black;
        cursor: pointer;
    }
    .attention .one-attention .text-name .name1{
        padding-top:15px;
        font-size: 16px;
        margin-bottom:10px; 
        color: #202020;
    }
    .attention .one-attention .text-name .fans{
        font-size: 10px;
    }
    .attention .one-attention .test-btn{
        float: left;
        width:15%;
        height: 45px;
    }
    .attention .one-attention .test{
        float: left;
        width:15%;
        height: 45px;
        padding-top:15px;
        font-size: 18px;
        /* font-weight: bold; */
        margin-bottom:10px; 
        color: #f22;
    }
    .attention .one-attention > .test-btn >.btn-fans{
        font-size: 14px;
        /* border: none; */
        outline: none;
        margin-bottom: 30px;
    }
} 
@media screen and (max-width:980px){
    #Community-pc{
        display:none;

    }
    #Community-mobile{
        width:100%;
        height: auto;
        padding-top:15%;
        display: block;
    }
    .mobile-top1{
        width:100%;
        height: auto;
        padding:10% 3% 10% 3%;
    }
    .mobile-top1 .top1-title{
        float: left;
        font-size:25px;
        line-height: 30px;
    }
    .mobile-top1 .top1-btn{
        float: right;
        font-size:20px;
        height: 30px;
        
    }
    .mobile-top1 .top1-btn .btn1{
        background-color: blue;
        color:white;
    }
    .mobile-top2{
        width:100%;
        height: auto;
        padding:5% 3% 3% 3%;
    }
    .mobile-top2 .top2-input{
        width:80%;
        height: 30px;;
    }
    .mobile-top2 .el-button{
        height: 30px;
    }
    .mobile-top2 .btn2{
        width:20%;
        height:30px;
    }
    .mobile-top3{
        width:100%;
        height: auto;
        padding:0% 3% 2% 3%;
    }
    .mobile-top3 .top3-word{
        margin-right:3%;
        font-size:18px;
        line-height: 20px; 
    }
    .mobile-top3 .top3-word:hover{
        color:blue;
    }
    .mobile-top4{
        border-bottom: 1px solid #e6e6e6;
    }
}
</style>
